<template>
  <div class="search">
    <input
      type="text"
      v-model="inputValue"
      :placeholder="placeholder"
      @input="inputChange"
    />
    <div @click="searchClick" class="el-icon-search"></div>
  </div>
</template>
<script>
export default {
  name: "",
  props:['placeholder'],
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    inputChange() {
      if (this.inputValue == "") return this.$emit("inputChange", true);
      this.$emit("inputChange", false);
    },
    searchClick() {
      if (this.inputValue !== "")
        return this.$emit("searchClick", this.inputValue);
    },
  },
};
</script>
<style scoped>
.search {
  width: 100%;
  height: 50px;
  border: 1px solid #fc5d5d;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 35px;
}
.el-icon-search {
  font-size: 20px;
  font-weight: 700;
  color: #fc5d5d;
}
.el-icon-search:hover {
  color: #0095ff;
  cursor: pointer;
}
input {
  width: 100%;
  border: 0;
  outline: none;
  font-size: 15px;
}
input::-webkit-input-placeholder {
  color: #cccccc;
}
input:-moz-placeholder {
  color: #cccccc;
}
input:-ms-input-placeholder {
  color: #cccccc;
}
</style>
